@tailwindcss/typography 提供美观的默认排版样式库

之前，一直对文章页的markdown排版样式不满意（自己编写的css样式），总觉得不够专业进而影响阅读体验，直到发现了@tailwindcss/typography，这玩意简直就是行业的标杆。然后就直接使用了，珍惜生命，拒绝造轮子。

核心功能

1. prose 类

只需添加 prose 类，即可自动为容器内的所有子元素应用专业的排版样式：

• 标题层级（h1-h6）
• 段落、列表、引用块
• 代码块、表格、水平线
• 链接、粗体、斜体等行内样式

<article class="prose">
  <!-- 这里的所有 HTML 都会自动获得美观的排版样式 -->
  <h1>文章标题</h1>
  <p>正文内容...</p>
  <ul>
    <li>列表项</li>
  </ul>
</article>

2. 尺寸变体

支持响应式调整排版大小：

• prose-sm - 小尺寸
• prose（默认）
• prose-lg - 大尺寸
• prose-xl - 超大尺寸

<article class="prose md:prose-lg lg:prose-xl">
  <!-- 响应式：小屏默认，中等屏幕 lg，大屏幕 xl -->
</article>

3. 颜色主题

5种灰度配色方案：

• prose-gray（默认）
• prose-slate
• prose-zinc
• prose-neutral
• prose-stone

<article class="prose prose-slate">
  <!-- 使用 slate 灰度配色 -->
</article>

4. 暗色模式支持

通过 dark:prose-invert 自动切换为适合暗色背景的配色：

<article class="prose prose-slate dark:prose-invert">
  <!-- 自动适配暗色模式 -->
</article>

安装配置

Tailwind CSS v4（推荐）

npm install -D @tailwindcss/typography

在 CSS 文件中引入：

@import "tailwindcss";
@plugin "@tailwindcss/typography";

Tailwind CSS v3

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

适用场景

• 博客文章：Markdown 渲染的内容
• 文档站点：技术文档、API 文档
• CMS 内容：后台富文本编辑器生成的 HTML
• 邮件模板：需要一致排版的邮件内容

注意事项

1. 不要嵌套：避免在 prose 容器内再嵌套 prose，会导致样式冲突
2. 优先级问题：Tailwind 的 preflight 基础样式可能与 prose 产生冲突，必要时检查具体性
3. v4 兼容性：Tailwind CSS v4 采用 CSS-first 配置方式，与 v3 的 JavaScript 配置有所不同

这个插件解决了 Tailwind 默认重置所有浏览器样式后，对富文本内容排版困难的问题，是构建内容型网站的必备工具。

tailwindcss-typography 官方地址

typography 样式演示地址